<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content Example</title>
<style>
    /* flex-container主要用在Flexbox 容器也可以用在Grid 容器，这里使用Flexbox 容器 */
  .flex-container {
    display: flex;
    background-color: #f2f2f2;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .flex-item {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    margin: 5px;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 14px;
  }

  /* Flexbox 容器水平居中对齐子项 */
  .center-items {
    justify-content: center;
  }

  /* Flexbox 容器两端对齐子项，子项之间间隔相等 */
  .space-between-items {
    justify-content: space-between;
  }

  /* Flexbox 容器每个子项周围分配相等的空间 */
  .space-around-items {
    justify-content: space-around;
  }

  /* Flexbox 容器子项分散对齐，子项之间间隔相等 */
  .space-evenly-items {
    justify-content: space-evenly;
  }

  /* Flexbox 容器子项紧贴起始边缘 */
  .start-items {
    justify-content: flex-start;
  }

  /* Flexbox 容器子项紧贴结束边缘 */
  .end-items {
    justify-content: flex-end;
  }
</style>
</head>
<body>

<h2>justify-content 属性演示</h2>

<h3>center: 子项水平居中对齐</h3>
<div class="flex-container center-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h3>space-between: 子项两端对齐，间隔相等</h3>
<div class="flex-container space-between-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h3>space-around: 子项周围分配相等的空间</h3>
<div class="flex-container space-around-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h3>space-evenly: 子项分散对齐，间隔相等</h3>
<div class="flex-container space-evenly-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h3>flex-start: 子项紧贴起始边缘</h3>
<div class="flex-container start-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

<h3>flex-end: 子项紧贴结束边缘</h3>
<div class="flex-container end-items">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

</body>
</html>
